<!-- 表格组件 -->
<script lang="tsx" setup>
import { toRaw } from 'vue';

import type { TableColumnOption } from '@/components/table-widget/table-widget.vue';
import TableWidget from '@/components/table-widget/table-widget.vue';
import {
  getEnumOptionsField,
  PARK_GRID_PATROL_RECORD_PATROL_STATUS_OPTIONS,
} from '@/config/enum-options';

import { injectState } from '../state';

defineOptions({ name: 'Sheet' });

const {
  selectedList,
  tableRef,
  detailDialogRef,
  page: { records, isLoading, execute },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());

const columns: TableColumnOption<(typeof records.value)[0]>[] = [
  {
    type: 'selection',
    fixed: 'left',
    noExport: true,
  },
  {
    label: '序号',
    type: 'index',
    fixed: 'left',
    width: 80,
  },
  {
    label: '园区网格',
    formatter: (row) => row.gridName ?? '-',
  },
  {
    label: '巡查队伍',
    formatter: (row) => row.teamName ?? '-',
  },
  {
    label: '计划时间',
    formatter: (row) => `${row.patrolPlanStartTime}--${row.patrolPlanEndTime}` ?? '-',
  },
  {
    label: '实际完成时间',
    formatter: (row) => row.patrolActualEndTime ?? '-',
  },
  {
    label: '巡查队长',
    formatter: (row) => row.teamLeaderName ?? '-',
  },
  {
    label: '队长联系电话',
    formatter: (row) => row.teamLeaderPhone ?? '-',
  },
  {
    label: '巡查状态',
    formatter: (row) =>
      getEnumOptionsField(
        PARK_GRID_PATROL_RECORD_PATROL_STATUS_OPTIONS,
        'label',
        row.patrolStatus,
      ) ?? '-',
  },
  {
    label: '执行记录',
    formatter: (row) => row.recordNum ?? '-',
  },

  {
    label: '操作',
    export: false,
    fixed: 'right',
    width: '200',
    noExport: true,
    formatter(row) {
      return (
        <>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('read', row)}
          >
            详情
          </el-button>
        </>
      );
    },
  },
];
</script>

<template>
  <TableWidget
    ref="tableRef"
    v-loading="isLoading"
    :data="records"
    :columns="columns"
    h="100%!"
    @selection-change="(rows:any) => (selectedList = toRaw(rows))"
  />
</template>
